<template>
  <div class="home">
    <div class="ec_box">
      <div class="ec_title">
        <div></div>
        <div class="title_text">新型冠状肺炎实时监测</div>
        <div class="title_time">
          当前时间：<span>2021年5月17-15时33分15秒</span>
        </div>
      </div>
      <div class="ec_content">
        <!-- 左边模块 -->
        <div class="ec_left">
          <div class="left_wrap">
            <h2>新增确诊TOP10</h2>
            <div class="left1"></div>
            <h2>大洲感染总人数走势图</h2>
            <div class="left2"></div>
            <h2>大洲感染人数饼状图</h2>
            <div class="left3"></div>
          </div>
        </div>
        <!-- 中间模块 -->
        <div class="ec_center">
          <ul class="top">
            <li>
              <span class="center_num">156622563</span>
              <span class="center_text">累计确诊</span>
            </li>
            <li>
              <span class="center_num">32050060</span>
              <span class="center_text">现存确诊</span>
            </li>
            <li>
              <span class="center_num">121309348</span>
              <span class="center_text">累计治愈</span>
            </li>
            <li>
              <span class="center_num">3263155</span>
              <span class="center_text">累计死亡</span>
            </li>
          </ul>

          <centermap></centermap>
        </div>
        <!-- 右边模块 -->
        <div class="ec_right">
          <div class="right_wrap">
            <div class="right1"></div>
            <h2>世界每周新增治愈和死亡人数</h2>
            <div class="right2"></div>
            <h2>境外输入</h2>
            <div class="right3"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import centermap from "@/components/centerMap";
import echarts from "echarts";
import $ from "jquery";
export default {
  name: "HomeView",
  components: {
    centermap,
  },
  data() {
    return {};
  },
  methods: {
    left1() {
      var myChart = echarts.init(document.querySelector(".left1"));
      var data = [
        {
          name: "印度",
          value: 80,
        },
        {
          name: "",
          value: 87.8,
        },
        {
          name: "美国",
          value: 71,
        },
        {
          name: "",
          value: 80,
        },
        {
          name: "阿根廷",
          value: 66,
        },
        {
          name: "",
          value: 80,
        },
        {
          name: "德国",
          value: 80,
        },
        {
          name: "",
          value: 80,
        },
        {
          name: "哥伦比亚",
          value: 80,
        },
        {
          name: "",
          value: 80,
        },
      ];
      var xData = [],
        yData = [];
      var min = 50;
      data.map(function (a, b) {
        xData.push(a.name);
        if (a.value === 0) {
          yData.push(a.value + min);
        } else {
          yData.push(a.value);
        }
      });
    
    var option = {
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            lineStyle: {
              opacity: 0,
            },
          },
          formatter: function (prams) {
            if (prams[0].data === min) {
              return "合格率：0%";
            } else {
              return "合格率：" + prams[0].data + "%";
            }
          },
        },
        legend: {
          data: ["直接访问", "背景"],
          show: false,
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "5%",
          top: "7%",
          height: "85%",
          containLabel: true,
          z: 22,
        },
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            data: xData,
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              show: true,
              color: "rgb(170,170,170)",
              fontSize: 16,
              textStyle: { color: "#fff", fontSize: 12 },
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#0c3b71",
              },
            },
            axisLabel: {
              color: "rgb(170,170,170)",
              formatter: "{value} %",
            },
          },
          {
            type: "value",
            gridIndex: 0,
            min: min,
            max: 100,
            splitNumber: 12,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            name: "合格率",
            type: "bar",
            barWidth: "30%",
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#2f89cf",
                  },
                ]),
              },
            },

            data: yData,
            zlevel: 11,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    left2() {
      var myChart = echarts.init(document.querySelector(".left2"));
      var xAxisData = [
        "02/14",
        "03/28",
        "05/07",
        "06/13",
        "07/25",
        "09/05",
        "10/17",
        "11/28",
      ];
      var legendData = ["亚洲", "北美洲", "太平洋", "欧洲", "其他"];
      var serieData = [];
      var metaDate = [
        [220, 230, 240, 245, 250, 0],
        [40, 42, 43, 80, 0, 3, 10, 30],
        [1, 2, 3, 2, 2, 2, 2, 2],
      ];
      for (var v = 0; v < legendData.length; v++) {
        var serie = {
          name: legendData[v],
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: metaDate[v],
        };
        serieData.push(serie);
      }
      var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"];
      var option = {
        legend: {
          show: true,
          left: "right",
          data: legendData,
          y: "5%",
          itemWidth: 18,
          itemHeight: 12,
          textStyle: { color: "#2e62b1", fontSize: 14 },
        },
        color: colors,
        grid: {
          left: "2%",
          top: "12%",
          bottom: "5%",
          right: "5%",
          containLabel: true,
        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        xAxis: [
          {
            type: "category",
            axisLine: { show: true, lineStyle: { color: "#6173A3" } },
            axisLabel: {
              interval: 0,
              textStyle: { color: "#163573", fontSize: 12 },
            },
            axisTick: { show: false },
            data: xAxisData,
          },
        ],
        yAxis: [
          {
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { textStyle: { color: "#9ea7c4", fontSize: 14 } },
            axisLine: { show: true, lineStyle: { color: "#6173A3" } },
          },
        ],
        series: serieData,
      };
      option && myChart.setOption(option);
    },
    left3() {
      var myChart = echarts.init(document.querySelector(".left3"));

      let option = {
        color: ["#1089e7", "#f57474"],
        tooltip: {
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          itemGap: 12,
          top: "87%",
          data: ["北美洲", "欧洲"],
          textStyle: { color: "#ccc" },
        },

        series: [
          {
            name: "项目数",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              { value: 90, name: "北美洲" },
              { value: 10, name: "欧洲" },
            ],
          },
        ],
      };
      option && myChart.setOption(option);
    },
    right1() {
      var myChart = echarts.init(document.querySelector(".right1"));
      var data = [70, 34, 60, 78, 69];
      var titlename = ["美国", "西班牙", "法国", "意大利", "德国"];
      var valdata = [];
      var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
      let option = {
        title: {
          text: "主要疫情国家治愈率",
          textStyle: {
            fontSize: 18,
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
        },
        xAxis: {
          show: false,
        },
        yAxis: [
          {
            show: true,
            data: titlename,
            inverse: true,
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              color: "#fff",
              formatter: function (value, index) {
                return [
                  "{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
                ].join("\n");
              },
              rich: {
                lg: {
                  backgroundColor: "#339911",
                  color: "#fff",
                  borderRadius: 15,
                  // padding: 5,
                  align: "center",
                  width: 15,
                  height: 15,
                },
              },
            },
          },
          {
            show: true,
            inverse: true,
            data: valdata,
            axisLabel: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "条",
            type: "bar",
            yAxisIndex: 0,
            data: data,
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: function (params) {
                  var num = myColor.length;
                  return myColor[params.dataIndex % num];
                },
              },
            },
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}%",
              },
            },
          },
          {
            name: "框",
            type: "bar",
            yAxisIndex: 1,
            barGap: "-100%",
            data: [100, 100, 100, 100, 100],
            barWidth: 20,
            itemStyle: {
              normal: {
                color: "none",
                borderColor: "#00c1de",
                borderWidth: 3,
                barBorderRadius: 15,
              },
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    right2() {
      var myChart = echarts.init(document.querySelector(".right2"));

      let option = {
        tooltip: {},
        grid: {
          top: "8%",
          left: "1%",
          right: "1%",
          bottom: "8%",
          containLabel: true,
        },
        legend: {
          data: [
            {
              name: "待处理",
              icon: "circle",
              textStyle: {
                color: "#7d838b",
              },
            },
            {
              name: "已处理",
              icon: "circle",
              textStyle: {
                color: "#7d838b",
              },
            },
            {
              name: "完成率",
              icon: "circle",
              textStyle: {
                color: "#7d838b",
              },
            },
          ],
          top: "5%",
          itemGap: 50,
          textStyle: {
            color: "#f9f9f9",
            borderColor: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#f9f9f9",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                color: "#d1e6eb",
                margin: 15,
              },
            },
            axisTick: {
              show: false,
            },
            data: [
              "02.12",
              "02.26",
              "03.12",
              "03.06",
              "04.09",
              "04.23",
              "05.0",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 7,
            splitLine: {
              show: true,
              lineStyle: {
                color: "#0a3256",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "待处理",
            data: [4, 6, 36, 6, 8, 6],
            type: "line",
            smooth: true, //是否平滑曲线显示
            // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
            showAllSymbol: true,
            symbol: "emptyCircle",
            symbolSize: 0,
            lineStyle: {
              normal: {
                color: "#28ffb3", // 线条颜色
              },
              borderColor: "#f0f",
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#fff",
              },
            },
            itemStyle: {
              normal: {
                color: "#28ffb3",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(0,154,120,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,0,0, 0)",
                    },
                  ],
                  false
                ),
                shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
            data: [100, 120, 110, 60, 70, 130, 150],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    right3() {
      var myChart = echarts.init(document.querySelector(".right3"));

      let option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        series: [
          {
            name: "半径模式",
            type: "pie",
            radius: ["10%", "60%"],
            center: ["50%", "50%"],
            roseType: "radius",
            label: {
              show: true,
              normal: {
                position: "outside",
                fontSize: 12,
              },
            },
            labelLine: {
              length: 1,
              length2: 20,
              smooth: true,
            },
            data: [
              {
                value: 4,
                name: "上海",
                itemStyle: {
                  color: "rgba(0, 108, 255,0.7)",
                  borderColor: "rgba(0, 108, 255,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 2,
                name: "广东",
                itemStyle: {
                  color: "rgba(96, 205, 160,0.7)",
                  borderColor: "rgba(96, 205, 160,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 1,
                name: "黑龙江",
                itemStyle: {
                  color: "rgba(237, 136, 132,0.7)",
                  borderColor: "rgba(237, 136, 132,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.9,
                name: "四川",
                itemStyle: {
                  color: "rgba(255, 159, 127,0.7)",
                  borderColor: "rgba(255, 159, 127,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.8,
                name: "陕西",
                itemStyle: {
                  color: "rgba(0, 150, 255,0.7)",
                  borderColor: "rgba(0, 150, 255,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.8,
                name: "内蒙古",
                itemStyle: {
                  color: "rgba(159, 230, 184,0.7)",
                  borderColor: "rgba(159, 230, 184,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.7,
                name: "福建",
                itemStyle: {
                  color: "rgba(49, 196, 232,0.7)",
                  borderColor: "rgba(49, 196, 232,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.6,
                name: "北京",
                itemStyle: {
                  color: "rgba(29, 157, 255,0.7)",
                  borderColor: "rgba(29, 157, 255,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.5,
                name: "天津",
                itemStyle: {
                  color: "rgba(253, 157, 127,0.7)",
                  borderColor: "rgba(253, 157, 127,0.7)",
                  borderWidth: 3,
                },
              },
              {
                value: 0.3,
                name: "内蒙古",
                itemStyle: {
                  color: "rgba(0, 108, 255,0.7)",
                  borderColor: "rgba(0, 108, 255,0.7)",
                  borderWidth: 1,
                },
              },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  mounted() {
    this.left1();
    this.left2();
    this.left3();
    this.right1();
    this.right2();
    this.right3();
  },
};
</script>
<style lang="scss" scoped>
.ec_box {
  list-style: none;
  height: 100vh;
  background-image: url("../assets/image/bg.jpg");
  color: #fff;

  .ec_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    div {
      flex: 1;
    }
    .title_text {
      font-size: 28px;
    }
    .title_time {
      color: #ccc;
    }
  }
  .ec_content {
    height: 100vh;
    display: flex;

    .ec_left {
      flex: 5;
      border: 1px solid red;
      .left_wrap {
        h2 {
          text-align: center;
          color: #fff;
          font-weight: normal;
          font-size: 16px;
        }
        div {
          width: 100%;
          height: 225px;
          margin: 7px 0;
        }
      }
    }
    .ec_center {
      flex: 10;
      border: 1px solid red;
      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.1);
        li {
          display: flex;
          flex-direction: column;
          align-items: center;
          .center_num {
            color: #cfc271;
            font-size: 20px;
          }
          .center_text {
            margin-top: 20px;
            color: rgb(241, 232, 232);
            font-size: 14px;
          }
        }
      }
    }
    .ec_right {
      flex: 5;
      border: 1px solid red;
      .right_wrap {
        h2 {
          text-align: center;
          color: #fff;
          font-weight: normal;
          font-size: 16px;
        }
        div {
          width: 100%;
          height: 225px;
          margin: 7px 0;
        }
      }
    }
  }
}
</style>
